<template>
    <div style="margin-bottom: 100px;">

            <div style="margin: 10px 0">
                <el-input clearable v-model="inputMessage" size="large" style="margin-left: 306px; width: 370px; font-size:17px" placeholder="请输入欲搜索内容..." clearable></el-input>
                <el-button @click="Search(inputMessage)"  size="medium" style="margin-left: 7px; background-color:pink" round>
                    <span style="font-size: 16px; color:blueviolet;">搜索</span>
                </el-button>
            </div>

            <el-row>
                <el-col :span="6">
                    <el-card class="box-card">
                        <div class="clearfix" style="text-align: center">
                            <span style="color:brown; font-size: 22px; font-weight:700" bold>热门分类</span>
                            <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                        </div>
                        <div v-for="item in popularFlower" :key="item" class="text item" style="margin-top: 10px; margin-left: 12px">
                            <el-button @click="searchByPopular(item)" style="color:darkmagenta; font-size:17px; background-color:wheat">{{ item }}</el-button>
                        </div>
                    </el-card>

                    <el-card class="box-card" style="margin-top: 6px; text-align: center">
                        <div class="clearfix">
                            <span  style="color:brown; font-size: 22px;  font-weight:700">鲜花分类</span>
                            <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                        </div>
                        <div v-for="item in flowerCategory" :key="item" class="text item" style="margin-top: 10px; margin-left: 12px">
                            <el-button @click="searchByCategory(item)" style="color:darkmagenta; font-size:17px; background-color:wheat">{{ item }}</el-button>
                        </div>
                    </el-card>
                </el-col>

                <!-- <el-col :span="18">
                    <el-carousel height="400px" style="width:789px; margin-left: 33px">
                        <el-carousel-item v-for="item in imgs" :key="item">
                            <img src="item" alt="" style="width: 100%; ">
                        </el-carousel-item>
                    </el-carousel>
                </el-col> -->
                <el-col :span="18">
                    <el-carousel height="400px" style="width:789px; margin-left: 33px">
                        <el-carousel-item v-for="item in imgs"  width="788px" height="400px" :key="item">
                            <img @click="$router.push('/front/popular')" style="cursor: pointer" :src="item.demo" alt="" >
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </el-row>

            <div class="purposes" style="margin-top:20px;" id="purposeId">
            <div class="col1">
                <div style="width:100%;height:95px;">
                    <a target="_blank" style="width:174px;display:inline-block;float:left; cursor: pointer" title="追求表白" class="col1_row1 bg_ff5676" @click="seKuaiSearch('追求表白')">追求表白</a>
                    <a target="_blank" style="width:116px;display:inline-block;float:left;background:#ea96b6; cursor: pointer" title="求婚" class="col1_row1 bg_ff5676" @click="seKuaiSearch('求婚')">求婚</a>
                </div>
                <div class="col1_row2" style="height:97px;">
                    <a target="_blank" style="width:145px;display:inline-block;float:left;line-height:97px; cursor: pointer" title="玫瑰专区" class="bg_ff8989" @click="seKuaiSearch('玫瑰专区')">玫瑰专区</a>
                    <a target="_blank" style="width:145px;display:inline-block;float:left;height:97px;line-height:97px; cursor: pointer" title="送老婆" class="bg_fe3f63" @click="seKuaiSearch('送老婆')">送老婆</a>
                </div>
            </div>
             <div class="col2">
                <div class="col2_row1">
                    <a target="_blank" style="width:226px;display:inline-block;float:left;margin-top:-192px; cursor: pointer; margin-left:290px" title="送女友" class="bg_ff8989" @click="seKuaiSearch('送女友')">送女友</a>
                    <a target="_blank" style="width:227px;display:inline-block;float:left;margin-top:-192px;margin-left:226px; cursor: pointer; margin-left:516px" title="恋爱纪念日" class="bg_ff5676" @click="seKuaiSearch('恋爱纪念日')">恋爱纪念日</a>
                </div>
                <div class="col2_row2" style="height:64px;margin-left:290px; ">
                    <div class="col2_row2_col1">
                        <a target="_blank" style="width:157px;display:inline-block;float:left;margin-top:-130px;line-height:64px; cursor: pointer" title="送闺蜜" class="col2_row2_col1_row1 bg_ff6666" @click="seKuaiSearch('送闺蜜')">送闺蜜</a>
                        <a target="_blank" style="width:157px;display:inline-block;height:66px;float:left;line-height:65px;margin-top:-66px; cursor: pointer" title="追求女神" class="col2_row2_col1_row2 bg_ff5676" @click="seKuaiSearch('追求女神')">追求女神</a>
                    </div>
                    <a target="_blank" style="width:140px;height:128px;display:inline-block;float:left;margin-top:-128px;margin-left:157px;line-height:128px; cursor: pointer" title="送红颜知己" class="col2_row2_col2 bg_ffc387" @click="seKuaiSearch('送红颜知己')">送红颜知己</a>
                    <div class="col2_row2_col2_col3">
                        <a target="_blank" style="width:156px;height:64px;display:inline-block;float:left;margin-top:-129px;margin-left:297px;line-height:64px; cursor: pointer" title="送给母亲" class="col2_row2_col2_col3_row1 bg_ff6666" @click="seKuaiSearch('送给母亲')">送给母亲</a>
                        <a target="_blank" title="送给男神" style="width:156px;height:70px;display:inline-block;float:left;margin-top:-70px;margin-left:297px;background-color:#ffb7cd;line-height:70px; cursor: pointer" class="col2_row2_col2_col3_row2 bg_ffb7cd" @click="seKuaiSearch('送给男神')">送给男神</a>
                    </div>
                </div>
            </div>
            <div class="col3">
                <div class="col3_row1">
                    <a target="_blank" style="width:118px;height:98px;display:inline-block;float:left;margin-top:-192px;margin-left:290px;line-height:98px; cursor: pointer" title="约会" class="col3_row1_col1 bg_ff8989" @click="seKuaiSearch('约会')">约会</a>
                    <a target="_blank" style="width:118px;height:98px;display:inline-block;float:left;margin-top:-256px;margin-left:861px;background-color:#ff688c;line-height:98px; cursor: pointer" title="父母生日" class="col3_row1_col2 bg_ff688c" @click="seKuaiSearch('父母生日')">父母生日</a>
                    <a target="_blank" style="width:118px;height:98px;display:inline-block;float:left;margin-top:-256px;margin-left:978px;line-height:98px; cursor: pointer" title="老婆生日" class="col3_row1_col3 bg_ff6666" @click="seKuaiSearch('老婆生日')">老婆生日</a>
                </div>
                <div class="col3_row2" style="height:14px;">
                    <a target="_blank" style="width:148px;height:94px;display:inline-block;float:left;margin-top:-158px;margin-left:743px;background-color:#ffcc99;line-height:94px; cursor: pointer" title="道歉鲜花" class="col3_row2_col1 bg_ffcc99" @click="seKuaiSearch('道歉鲜花')">道歉鲜花</a>
                    <a target="_blank" style="width:108px;height:94px;display:inline-block;float:left;margin-top:-158px;margin-left:891px;line-height:94px; cursor: pointer" title="纪念日" class="col3_row2_col2 bg_ff6666" @click="seKuaiSearch('纪念日')">纪念日</a>
                    <a target="_blank" style="width:107px;height:94px;display:inline-block;float:left;margin-top:-158px;margin-left:990px;background-color:#ff87ac;line-height:94px; cursor: pointer" title="送老师" class="col3_row2_col3 bg_ff87ac" @click="seKuaiSearch('送老师')">送老师</a>
                </div> 
            </div>
            </div>

            <div style="margin-top:10px">
                <span v-if="isSeKuai ===true" style="font-size:25px; color:#ff688c; margin-left:-450px">适用对象【<span style="color:chocolate;font-size:29px;">{{ purpose }}</span>】:</span>
                <span v-else style="font-size:25px; color:#ff688c; margin-left:-450px">检索关键词【<span style="color:chocolate;font-size:29px;">{{ purpose }}</span>】:</span>
            </div>


            <div style="margin-top:0px;">
                <el-row :gutter="10">
                    <el-col :span="6" v-for="item in tableData" :key="item.id" style="margin-bottom: 10px">
                        <el-card style="background-color:lightpink">
                            <div>
                                <div style="margin-right: 2px;border-radius: 10px;overflow: hidden">
                                    <img :src="item.img" alt="" style="width: 220px; height: 220px;cursor: pointer " @click="$router.push('/front/detail?id=' + item.id)">
                                </div>
                                
                                <div style="text-align: center; padding: 1px 0; margin-top: 10px">
                                    <span style="color:chocolate; font-size:large;cursor: pointer"><b @click="$router.push('/front/detail?id=' + item.id)"><span style="font-size:22px">{{ item.name }}</span></b></span>
                                </div>
                                <div style="text-align: center; padding: 1px 0; margin-top: 10px; margin-right: 10px">
                                    <span style="color:crimson; font-size:large;">￥{{ item.price }}.00</span>
                                </div>
                                <!-- <div style="margin-top: 10px; margin-left: 15px">
                                    <el-button type="primary">详情</el-button>
                                    <el-button type="warning">添加</el-button>
                                </div> -->
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>

            <!-- <div style="padding: 10px 0">
                <el-pagination
                    :current-page="pageNum"
                    :page-sizes="[7, 5, 10, 20]"
                    layout="total, prev, pager, next"
                    :total="total"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    :page-size="pageSize"
                >
                </el-pagination>
            </div> -->

    </div>
</template>

<script>
export default {
name: 'Home',

    data() {
        return {
            imgs:[
                // '../../assets/LunBoTu1.png'
                {demo:require('../../assets/LunBoTu1.png')},
                {demo:require('../../assets/LunBoTu3.png')},
                {demo:require('../../assets/LunBoTu2.png')},
                // 'https://img0.baidu.com/it/u=3854438144,4154935667&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400',
                // 'https://img0.baidu.com/it/u=51514538,1187639787&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400',
            ],
            tableData: [],
            total: 0,
            popularFlower: ['生日鲜花','恋爱约会','表白求婚','婚庆鲜花','问候长辈','周年纪念','祝贺鲜花','探病慰问'],
            flowerCategory: ['玫瑰','红玫瑰','满天星','粉玫瑰','香槟玫瑰','向日葵','香水百合','蓝色妖姬',],
            purpose: "无",
            inputMessage: '',
            isSeKuai: true,
            pageNum: 1,
            pageSize:7,
        };
    },

    methods: {
        load(){
            this.request.get("flower/frontPage").then(res =>{
            console.log('1',res.data);
            // this.tableData = res.data.filter(v => v.type === 'png' || v.type === 'jpg' || v.type === 'webp')
            this.tableData = res.data.slice(0,12)
            this.total = res.data.length
            console.log('西瓜',this.tableData);
        })
        },
        handleCurrentChange(pageNum) {
            console.log(pageNum);
            this.pageNum = pageNum;
            this.load();
            },
        handleCurrentChange(pageNum) {
            console.log('啊啊啊',pageNum);
            this.pageNum = pageNum;
            this.load();
        },
        searchByPopular(item){
            this.isSeKuai = true;
            console.log('message',item);
            this.purpose = item;
            this.request.get('flower/queryByPurpose/'+ item).then(res=>{
                console.log('queryByPurpose',res);
                this.tableData = res.data.slice(0,12)
                this.total = res.data.length
                this.$el.querySelector("#purposeId").scrollIntoView()
            })
        },
        searchByCategory(item){
            // alert(item)
            this.isSeKuai = false;
            this.purpose = item;
            this.request.get('flower/queryByConstitute/' + item).then(res =>{
                if(res.code === '200'){
                    this.tableData = res.data.slice(0,12)
                    this.total = res.data.length
                    this.$el.querySelector("#purposeId").scrollIntoView()
                }else{
                    this.$message.error('搜索失败,请重新输入！')
                }
            })
        },
        seKuaiSearch(message){
            this.isSeKuai = true;
            console.log('message',message);
            this.purpose = message;
            this.request.get('flower/queryByPurpose/'+ message).then(res=>{
                console.log('queryByPurpose',res);
                this.tableData = res.data.slice(0,12)
                this.total = res.data.length
                this.$el.querySelector("#purposeId").scrollIntoView()
            })
        },
        Search(message){
            this.isSeKuai = false;
            console.log('message',message);
            this.purpose = message;
            this.request.get('flower/queryByPurpose/'+ message).then(res=>{
                console.log('queryByPurpose',res);
                this.tableData = res.data.slice(0,12)
                this.total = res.data.length
                this.$el.querySelector("#purposeId").scrollIntoView()
            })
        },
    },

    created(){
        this.load();
    }

};
</script>

<style scoped>
.box-card{
    width: 300px;
    height: 196px;
    background-color:blanchedalmond
}

.purposes .col1 .col1_row1 {
    height: 95px;
    line-height: 95px;
}
.purposes a {
    text-align: center;
    color: #fff;
    font-size: 26px;
    width: 100%;
    display: inline-block;
}
.bg_ff5676 {
    background: #ff5676;
}

body a {
    outline: none;
}

a {
    text-decoration: none;
}
* {
    margin: 0;
    padding: 0;
    font-size: 12px;
}

.bg_ff8989 {
    background: #ff8989;
}
.bg_fe3f63 {
    background: #fe3f63;
}
.bg_ff8989 {
    background: #ff8989;
}

.purposes .col2 {
    width: 453px;
    float: left;
}

.purposes .col2 .col2_row1 a {
    width: 50%;
    float: left;
    height: 64px;
    line-height: 64px;
}
.bg_ff6666 {
    background: #ff6666;
}
.bg_ffc387 {
    background: #ffc387;
}

</style>